<template>
  <div class="classification">
    <header>
      <van-icon name="cross" size=".56rem" @click="toSociety"/>
    </header>
    <div class="mychannel">
      <div class="myheader">
        <div>我的频道</div>
        <span>点击编辑删除频道</span>
        <a class="sort edit" @click="sort" v-if="!isEdit">排序</a>
        <a class="edit" @click="edit" v-if="!isEdit">编辑</a>
        <a class="edit" @click="finish" v-else>完成</a>
      </div>
      <div class="class_box">
        <div v-for="(item, index) in mychannel" :key="index" class="class_item">
          {{item.name}}<span class="del_btn" v-if="isEdit && index >= 3" @click="delChannel(index)"><van-icon name="cross" size=".32rem"/></span>
        </div>
      </div>
    </div>
    <div class="newchannel">
      <div class="newheader">
        <div>频道推荐</div>
        <span>点击编辑添加频道</span>
      </div>
      <div class="class_box">
        <div v-for="(item, index) in newchannel" :key="index" class="class_item" @click="addChannel(index)">
          {{item.name}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isEdit: false,
      mychannel: [],
      newchannel: [],
      mychannelIdArr: ''
    }
  },
  methods: {
    toSociety () {
      this.$router.replace('/society')
    },
    edit () {
      this.isEdit = true
    },
    finish () {
      for (let x in this.mychannel) {
        this.mychannelIdArr += `${this.mychannel[x].id}${parseInt(x) === this.mychannel.length - 1 ? '' : ','}`
      }
      this.$axios.post('/api/user/social/classify/update', {
        order_list: this.mychannelIdArr
      }).then(res => {
        if (res.status === 200) {
          this.isEdit = false
        }
      })
    },
    addChannel (index) {
      if (!this.isEdit) {
        return false
      }
      this.mychannel.push(this.newchannel[index])
      this.newchannel.splice(index, 1)
    },
    delChannel (index) {
      this.newchannel.push(this.mychannel[index])
      this.mychannel.splice(index, 1)
    },
    getClassifyList () {
      this.$axios.get('/api/classify/list').then(res => {
        this.mychannel = res.data.userFocus
        this.newchannel = res.data.systemClassify
      })
    },
    sort () {
      this.$router.push('/sort')
    }
  },
  created () {
    this.getClassifyList()
  }
}
</script>

<style lang="scss">
.classification{
  header{
    padding: .26rem .26rem .34rem;
    display: flex;
  }
  .mychannel{
    .myheader{
      display: flex;
      align-items: flex-end;
      padding: 0 .16rem 0 .2rem;
      div{
        flex: 0 1 auto;
        color: #333333;
        font-size: .32rem;
        font-weight: bold;
        margin-right: .12rem;
      }
      span{
        flex: 1;
        font-size: .24rem;
        color: #cccccc;
      }
      .edit{
        flex: 0 1 auto;
        border: #ff2a1f solid .02rem;
        width: .96rem;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: .48rem;
        font-size: .24rem;
        color: #ff2a1f;
        background: #ffffff;
        border-radius: .24rem;
      }
      .sort{
        margin-right: .16rem;
      }
    }
    .class_box{
      display: flex;
      flex-wrap: wrap;
      padding: 0 .16rem;
      .class_item{
        width: 1.64rem;
        height: .76rem;
        background: #f4f5f7;
        color: #333333;
        font-size: .28rem;
        line-height: .76rem;
        text-align: center;
        margin: .2rem .2rem 0 0;
        border-radius: .08rem;
        position: relative;
        .del_btn{
          width: .34rem;
          height: .34rem;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #c9c9c9;
          border-radius: .34rem;
          position: absolute;
          top: -.1rem;
          right: -.1rem;
        }
      }
      .class_item:nth-child(4n){
        margin-right: 0;
      }
    }
  }
  .newchannel{
    margin-top: .3rem;
    .newheader{
      display: flex;
      align-items: flex-end;
      padding: 0 .16rem 0 .2rem;
      div{
        flex: 0 1 auto;
        color: #333333;
        font-size: .32rem;
        font-weight: bold;
        margin-right: .12rem;
      }
      span{
        flex: 1;
        font-size: .24rem;
        color: #cccccc;
      }
    }
    .class_box{
      display: flex;
      flex-wrap: wrap;
      padding: 0 .16rem;
      .class_item{
        width: 1.64rem;
        height: .76rem;
        background: #ffffff;
        color: #333333;
        font-size: .28rem;
        line-height: .76rem;
        text-align: center;
        margin: .2rem .2rem 0 0;
        border-radius: .08rem;
        box-shadow:0px 0px 6px rgba(0,0,0,0.16);
      }
      .class_item:nth-child(4n){
        margin-right: 0;
      }
    }
  }
}
</style>
